<template>
  <div>
    <div
      v-if="!isButtonStyle"
      :style="{padding: `${padding.join('px ')}px`}"
      :class="{
    'route-big-nav': isBig,
    'route-block-nav': isBlock,
    'route-small-nav': isSmall,
    'route-nav': !isBig && !isSmall && !isBlock,
    'route-bottom': isBottom}">
      <a
        v-for="item in navData"
        :class="{hover: item.hover}"
        :title="item.tip"
        :style="{fontSize: fontSize, fontWeight: fontWeight, paddingBottom: paddingBottom}"
        @click="push(item)">{{item[label]}}<span v-if="item.length">({{item.length}})</span></a>
      <slot name="left"></slot>
      <div class="right">
        <slot name="right"></slot>
      </div>
    </div>
    <div v-else>
      <button
        v-for="(item, index) in navData"
        :class="{'button-block': item.hover, 'button-line': !item.hover, mr10: index !== (navData.length - 1)}"
        :style="{fontSize: fontSize, fontWeight: fontWeight, paddingBottom: paddingBottom}"
        @click="push(item)">{{item[label]}}</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'zz-nav',
    data () {
      return {
        navData: [],
        routePath: this.$route ? this.$route.path.split('/') : ''
      }
    },
    watch: {
      '$route': 'setNav',
      data: {
        handler: function (val) {
          this.navData = val
        },
        deep: true
      }
    },
    props: {
      data: {
        type: Array
      },
      isRoute: {
        type: Boolean,
        default: false
      },
      isSmall: {
        type: Boolean,
        default: false
      },
      isBig: {
        type: Boolean,
        default: true
      },
      isBlock: {
        type: Boolean,
        default: false
      },
      padding: {
        type: Array,
        default: function () {
          return [20, 20, 0, 0]
        }
      },
      paddingBottom: {
        type: String,
        default: '18px'
      },
      isBottom: {
        type: Boolean,
        default: false
      },
      fontSize: {
        type: String,
        default: '14px'
      },
      fontWeight: {
        type: String,
        default: 'normal'
      },
      // 自定义显示的name
      label: {
        type: String,
        default: 'name'
      },
      // 是否获取拥有权限的菜单
      isMenu: {
        type: Boolean,
        default: false
      },
      // 是否获取拥有权限的子菜单
      isChildMenu: {
        type: Boolean,
        default: false
      },
      isButtonStyle: {
        type: Boolean,
        default: false
      }
    },
    mounted () {
      if (this.isMenu) {
        this.setMenus('menus')
      } else if (this.isChildMenu) {
        this.setMenus('childMenus')
      } else {
        this.navData = this.data
      }
      this.setNav()
    },
    methods: {
      setNav () {
        if (this.isRoute) {
          const path = this.$route.fullPath.split('/')
          let secondPath = ''
          let threePath = ''
          if (path.length > 2) {
            secondPath = path[2]
          }
          if (path.length > 3) {
            threePath = path[3]
          }
          const name = this.$route.name
          this.navData.forEach(x => {
            x.hover = false
            let route = x.source || x.route
            if (route === name || route === secondPath || route === threePath) {
              x.hover = true
            }
          })
        }
      },
      push (item) {
        let query = {data: item.datas}
        if (item.queryName) {
          query[item.queryName] = item.data
        } else {
          query['id'] = item.data
        }
        let obj = {name: item.route, query: query}
        if (this.isRoute) {
          if (this.isMenu) {
            this.setMenu(item)
          } else if (this.isChildMenu) {
            this.setChildMenu(item)
          } else {
            this.$router.push(obj)
          }
        } else {
          this.emit(item)
        }
      },
      setMenus (name) {
        this.navData = this.$local.get(name).map((item) => {
          Object.assign(item, {'name': item.menuName})
          Object.assign(item, {'route': item.menuCode})
          return item
        })
      },
      // 设置菜单
      setMenu (item) {
        const childMenu = item.childMenu[0]
        // 没有子菜单的情况
        if (childMenu.hasOwnProperty('funName')) {
          this.$local.set('funs', item.childMenu)
          this.$router.push({
            name: item.route
          })
        } else {
          const funs = childMenu.childMenu
          this.$local.set('childMenus', item.childMenu)
          this.$local.set('funs', funs)
          this.$router.push({
            name: item.route
          })
        }
      },
      setChildMenu (item) {
        this.$local.set('funs', item.childMenu)
        this.$router.push({
          name: item.route
        })
      },
      emit (item) {
        this.navData.forEach(x => {
          x.hover = false
          if (x[this.label] === item[this.label]) {
            x.hover = true
          }
        })
        this.$emit('handle', item.data)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .route-big-nav{
    a{
      padding:0 0 18px 0;
      display: inline-block;
      margin-right: 40px;
      background: #fff;
      cursor: pointer;
      &:hover{
        color: $color;
      }
    }
    .right{
      margin-top: -4px;
    }
    .hover{
      color: $color;
    }
  }

  .route-nav{
    a{
      padding:0 3px 18px 3px;
      display: inline-block;
      margin-right: 40px;
      cursor: pointer;
      &:hover{
        border-bottom: 2px $color solid;
      }
    }
    .right{
      margin-top: -6px;
    }
    .hover{
      border-bottom: 2px $color solid;
    }
  }

  .route-small-nav {
    a{
      font-size: $font-size-smallest;
      padding: 0 20px 0 0;
      display: inline-block;
      cursor: pointer;
      &:hover{
        color: $color;
      }
      &:after{
        content:"|";
        color: $color-line;
        padding-left: 18px;
      }
      &:nth-last-of-type(1) {
        padding-right: 0;
        &:after{
          content:"";
        }
      }
    }
    .right{
      margin-top: -8px;
    }
    .hover{
      color: $color;
    }
  }

  .route-block-nav{
    height: 45px;
    box-sizing: border-box;
    background: $color-bg;
    border: 1px $color-line solid;
    a{
      padding: 14px 25px !important;
      display: inline-block;
      cursor: pointer;
      &:hover{
        color: $color;
        background: #fff;
      }
    }
    .right{
      margin: 7px 7px 0 0;
    }
    .hover{
      color: $color;
      background: #fff;
      border-right: 1px $color-line solid;
      border-left: 1px $color-line solid;
      &:first-child{
        border-left: 0px $color-line solid;
      }
    }
  }

  .route-bottom{
    border-bottom: 1px $color-line solid;
    a{
      padding-bottom: 20px;
    }
  }
</style>
